<!-- @format -->

<template>
	<ma-chart :option="loginChartOptions" />
</template>

<script setup lang="ts">
	import { nextTick, onMounted, ref } from "vue";
	import { graphic } from "echarts";
	import warehouseMaster from "@/api/warehouse/warehouseMaster.js";

	function graphicFactory(side) {
		return {
			type: "text",
			bottom: "8",
			...side,
			style: {
				text: "",
				textAlign: "center",
				fill: "#4E5969",
				fontSize: 12,
			},
		};
	}

	const graphicElements = ref([
		graphicFactory({ left: "2.6%" }),
		graphicFactory({ right: 0 }),
	]);

	const loginChartOptions = ref({});

	const getData = () => {
		warehouseMaster
			.getList({
				page: 1,
				pageSize: 10000,
				// qst:1
			})
			.then((res) => {
				let data = res.data.items;
				loginChartOptions.value = {
					background: "transparent",
					title: {
						text: res.data.items[0].shiyonglv + "%",
						x: "25%",
						y: "center",
						textStyle: {
							fontSize: 20,
							color: "#00A0E9",
						},
						itemGap: 2,
						padding: 0,
						textAlign: "center",
						subtext: "仓库使用率",
						subtextStyle: {
							color: "#666",
							fontSize: 16,
						},
					},
					legend: {
						type: "scroll",
						top: "center",
						left: "50%",
						selectedMode: false,
						orient: "vertical",
						containLabel: true,
						textStyle: {
							color: "#ffffff",
							fontSize: 16,
							rich: {
								name: {
									fontSize: 14,
									color: "#000",
									padding: [0, 10, 0, 0], //上，右，下，左
									width: 150,
								},
								// num: {
								// 	fontSize: 14,
								// 	color: "#000",
								// 	padding: [0, 10, 0, 0],
								// 	width: 60,
								// },
								weight: {
									fontSize: 14,
									color: "#000",
								},
							},
						},
						formatter(name) {
							let tarValue;
							let weight;
							for (let i = 0; i < data.length; i++) {
								if (data[i].name == name) {
									tarValue = data[i].number;
									weight = (data[i].weight - 0).toFixed(3);
								}
							}
							let v = tarValue;
							let w = weight;

							// return [`{name|${name}}`, `{num|${v} 件}{weight|${w} 吨}`].join(
							// 	" "
							// );
							return [`{name|${name}}`, `{weight|${w} 吨}`].join(
								" "
							);
						},
					},
					series: [
						{
							data: data.map((item) => ({
								...item,
								value: item.shiyonglv,
							})),
							type: "pie",
							radius: ["28%", "60%"],
							center: ["25%", "50%"],
							clockwise: true,
							avoidLabelOverlap: true,
							label: {
								show: true,
								position: "inside",
								formatter(param) {
									return param.name;
								},
							},
						},
					],
				};
			});
	};

	onMounted(() => {
		getData();
	});
</script>

<style lang="less" scoped></style>
